<template>
  <div>
    <h1>操作日志管理</h1>
    <el-divider></el-divider>
    <el-table :data="logList">
      <el-table-column prop="id" label="序号" min-width="80"></el-table-column>
      <el-table-column prop="account" label="账号" min-width="120"></el-table-column>
      <el-table-column prop="ip" label="ip地址" min-width="120"></el-table-column>
      <el-table-column prop="remark" label="操作类型" min-width="120"></el-table-column>
      <el-table-column prop="type" label="操作时间" min-width="120">
        <template v-slot="{ row }">
          {{ moment(parseInt(row.create_time)).format("YYYY/MM/DD HH:MM:ss") }}
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination @size-change="sizeChange" :page-sizes="[5, 10, 15, 20]" @current-change="pageChange" background
      layout="pre,pager,next,sizes,jumper" :total="logTotal" v-model:page-size="size"></el-pagination>

  </div>
</template>

<script setup>
import moment from 'moment'
// console.log(moment().format);

import { getLogList, getLogTotal } from '@/utils/api'
import { onMounted, ref } from 'vue'
const logList = ref([])
const logTotal = ref(0)
const page = ref(1)
const size = ref(10)
const getLogListAction = async () => {
  const { data } = await getLogList({ page: page.value, size: size.value })
  if (data.code === 200) {
    logList.value = data.data
  }
}
const getLogTotalAction = async () => {
  const { data: countData } = await getLogTotal({ page: page.value, size: size.value })
  logTotal.value = countData.data
}
const updateLog = () => {
  getLogListAction({ page: page.value, size: size.value })
  getLogTotalAction()
}
onMounted(async () => {
  updateLog()
})


const pageChange = (num) => {
  page.value = num
  // 重新发送请求
  getLogListAction({ page: page.value, size: size.value })
}
const sizeChange = (num) => {
  size.value = num
  // 重新发送请求
  getLogListAction({ page: page.value, size: size.value })
}


</script>

<style></style>